<template>
	<div class="movieMent">
		<NewsHeader 
			:isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder" 
			:aimUrl = 'dataArr.aimUrl'
			:rightUrl='dataArr.rightUrl'
		/>
		<PublicTitle
		   :publictitle= 'publictitle'
		/>
		<div class="movieContent" v-for="(item,index) in movieArr" :key="index">
			<div>
				<img :src="item.imgUrl" alt="">
			</div>
			<div>
				<p>{{item.title}}</p>
				<p>{{item.iconname}}</p>
			</div>
			<div>
				<p>{{item.yuyueTime}}</p>
				<p><a href="javascript:;">取消预约</a></p>
			</div>
		</div>
	</div>
</template>
<script>
import NewsHeader from '../../../components/shopheader'
import PublicTitle from '../components/publictitle'
export default{
	name:'movieMent',
	components:{
		NewsHeader,
		PublicTitle
	},
	data(){
		return{
			dataArr:{
				isInput:false,
				iconArr:[
					{
						iconLeft:"icon-zuojiantou",
						iconRight:""
					}
				],
				placeholder:"视频预约",
				aimUrl:'/smalltalk_page',
				rightUrl:''
			},
			publictitle:[
				{
					titleleft:'等待与经纪人连接',
					titlelright:'已完成预约'
				}
			],
			movieArr:[
				{
					title:"宜居经济人",
					iconname:"流畅",
					imgUrl:require("../../../assets/images/mine/img_kefu@2x.png"),
					yuyueTime:"2017/12/28"
				},
				{
					title:"宜居经济人",
					iconname:"林达",
					imgUrl:require("../../../assets/images/mine/img_touxiangweiliao@2x.png"),
					yuyueTime:"2017/12/26"
				}
			]
		}
	}
}
</script>
<style scoped lang="less">
.movieMent{
	width: 100%;
	min-height:1334 / 100rem;
	padding-top: 88 / 100rem;
	box-sizing: border-box;
	background-color: #f2f2f2; 
	.movieContent{
		width: 95%;
		height: 70 / 50rem;
		background-color: #fff;
		margin: 20 / 2 / 50rem auto;
		border-radius: 8 / 2 / 50rem;
		overflow: hidden;
		div{
			float: left;
			height: 100%;
		}
		div:nth-child(1){
			width: 22%;
			text-align: center;
			img{
				width: 60 / 50rem;
				height: 60 / 50rem;
				margin-top: 5 / 50rem;
			}
		}
		div:nth-child(2){
			width: 50%;
			margin-left: 20 / 2 / 50rem;
			color: #333;
			font-size: 15 / 50rem;
			font-weight: 700;
			p{
				margin-top: 15 / 2 / 50rem;
			}
			p:nth-child(1){
				margin-top: 25 / 2 /50rem;
			}
		}
		div:nth-child(3){
			width: 23%;
			text-align: center;
			color: #f55;
			font-size: 13 / 50rem;
			p{
				a{
					display: inline-block;
					padding: 4 / 50rem 6 / 50rem;
					border: 1 / 50rem solid #f55;
					border-radius:  5 / 50rem;
				}
			}
			p:nth-child(1){
				margin-top: 20 / 2 / 50rem;
				margin-bottom: 20 / 2 / 50rem;
			}
		}
	}
}	
</style>